<template>
    <view v-if="show" class="auth-modal">
      <view class="modal-content">
        <view class="title">欢迎使用本小程序</view>
        <view class="desc">请授权登录以继续使用</view>
        <button class="auth-btn" @click="handleLogin" :disabled="loading">
          <text v-if="loading">授权中...</text>
          <text v-else>{{ platform === 1 ? '微信' : '抖音' }}授权登录</text>
        </button>
        <button class="cancel-btn" @click="closeFn">暂不登录</button>
      </view>
    </view>
  </template>
  
  <script setup>
  import { defineProps, defineEmits, computed, ref } from 'vue'
  import { onGetUserInfo, handlewxLogin } from '../../pages/utils/login.js'
  const props = defineProps({
    show: Boolean
  })
  const loading = ref(false)
  const platform = computed(() => {
    return uni.getSystemInfoSync().uniPlatform === 'mp-weixin' ? 1 : 2
  })
  const emit = defineEmits(['close', 'success'])
  const handleLogin = async() => {
    loading.value = true
    try {
      if (platform.value === 1) {
        await handlewxLogin()
      } else {
        await onGetUserInfo()
      }
      emit('success')
    } catch (err) {
      console.error('登录失败', err)
    } finally {
      loading.value = false
    }
  }
  const closeFn = () => {
    emit('close')
  }
  

  </script>
  
  <style scoped>
  .auth-modal {
    position: fixed;
    left: 0; top: 0;
    right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
  
  .modal-content {
    background-color: #fff;
    width: 600rpx;
    padding: 60rpx 40rpx;
    border-radius: 20rpx;
    text-align: center;
  }
  
  .logo {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 30rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .desc {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 40rpx;
  }
  
  .auth-btn {
    background: linear-gradient(to right, #45b5ff, #2b65f6);
    color: #fff;
    font-size: 28rpx;
    padding: 10rpx 0;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
  }
  
  .cancel-btn {
    font-size: 28rpx;
    color: #999;
    background-color: #f7f7f7;
    border-radius: 10rpx;
    padding: 10rpx 0;
  }
  </style>
  